<template>
  <div class="jw-sketch">
    <el-row>
      <el-col :span="18" :offset="3" class="sketch-breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">效果图</el-breadcrumb-item>
          <el-breadcrumb-item>客厅效果图</el-breadcrumb-item>
          <el-breadcrumb-item>风格</el-breadcrumb-item>
          <el-breadcrumb-item>颜色</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="18" :offset="3" class="sketch-select-type pb-20">
        <el-descriptions class="margin-top" :column="1" :size="'default'" border>
          <el-descriptions-item label="空间" label-align="center" align="left">
            <el-radio-group v-model="queryParams.spaceId" :size="'default'">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">客厅</el-radio-button>
              <el-radio-button label="2">卧室</el-radio-button>
              <el-radio-button label="3">厨房</el-radio-button>
              <el-radio-button label="4">卫生间</el-radio-button>
              <el-radio-button label="5">餐厅</el-radio-button>
              <el-radio-button label="6">玄关</el-radio-button>
              <el-radio-button label="7">阳台</el-radio-button>
              <el-radio-button label="8">功能区</el-radio-button>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="风格" label-align="center" align="left">
            <el-radio-group v-model="queryParams.toneId" :size="'default'">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">现代简约</el-radio-button>
              <el-radio-button label="2">极简</el-radio-button>
              <el-radio-button label="3">轻奢风</el-radio-button>
              <el-radio-button label="4">奶油风</el-radio-button>
              <el-radio-button label="5">北欧风</el-radio-button>
              <el-radio-button label="6">原木风</el-radio-button>
              <el-radio-button label="7">复古风</el-radio-button>
              <el-radio-button label="8">新中式</el-radio-button>
              <el-radio-button label="9">混搭</el-radio-button>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="颜色" label-align="center" align="left">
            <el-radio-group v-model="queryParams.colourId" :size="'default'">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">白色</el-radio-button>
              <el-radio-button label="2">灰色</el-radio-button>
              <el-radio-button label="3">蓝色</el-radio-button>
              <el-radio-button label="4">绿色</el-radio-button>
              <el-radio-button label="5">橙色</el-radio-button>
              <el-radio-button label="6">粉色</el-radio-button>
            </el-radio-group>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" :offset="3" class="pd-20">
        <!-- <RouterView></RouterView> -->
        <WaterFall :list="datasource" />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import WaterFall from '@/components/waterFall.vue'
const queryParams = reactive({
  spaceId: '1',
  toneId: '1',
  colourId: ''
})
// 模拟列表数据
const datasource = reactive([
  {
    id: '1',
    name: '复古风100㎡三居客厅2023装饰设计图',
    src: new URL(`/src/assets/images/2023-11-22/${'11'}.jpg`, import.meta.url).href
  },
  {
    id: '2',
    name: '混搭100㎡二居餐厅2023装修装饰效果图',
    src: new URL(`/src/assets/images/2023-11-22/${'1'}.jpg`, import.meta.url).href
  },
  {
    id: '3',
    name: '混搭70㎡二居客厅2023装饰效果图片',
    src: new URL(`/src/assets/images/2023-11-22/${'2'}.jpg`, import.meta.url).href
  },
  {
    id: '4',
    name: '四居现代简约160㎡卧室2023装饰设计图',
    src: new URL(`/src/assets/images/2023-11-22/${'3'}.jpg`, import.meta.url).href
  },
  {
    id: '5',
    name: '复古风100㎡三居卧室2023装修图片',
    src: new URL(`/src/assets/images/2023-11-22/${'4'}.jpg`, import.meta.url).href
  },
  {
    id: '6',
    name: '原木风125㎡三居餐厅2023装修设计效果图',
    src: new URL(`/src/assets/images/2023-11-22/${'5'}.jpg`, import.meta.url).href
  },
  {
    id: '7',
    name: '二居混搭70㎡卧室2023装修效果图',
    src: new URL(`/src/assets/images/2023-11-22/${'6'}.jpg`, import.meta.url).href
  },
  {
    id: '8',
    name: '三居混搭110㎡餐厅2023装饰设计图',
    src: new URL(`/src/assets/images/2023-11-22/${'7'}.jpg`, import.meta.url).href
  },
  {
    id: '9',
    name: '二居混搭100㎡厨房2023装饰效果图片',
    src: new URL(`/src/assets/images/2023-11-22/${'8'}.jpg`, import.meta.url).href
  },
  {
    id: '10',
    name: '现代简约160㎡四居餐厅2023装修设计图',
    src: new URL(`/src/assets/images/2023-11-22/${'9'}.jpg`, import.meta.url).href
  },
  {
    id: '11',
    name: '70㎡二居混搭客厅2023装饰装修效果图',
    src: new URL(`/src/assets/images/2023-11-22/${'10'}.jpg`, import.meta.url).href
  },
  {
    id: '12',
    name: '0元搞定设计方案，限名额领取',
    src: new URL(`/src/assets/images/2023-11-22/${'12'}.jpg`, import.meta.url).href
  }
])
</script>

<style lang="scss" scoped>
.jw-sketch {
  .sketch-breadcrumb {
    padding: 20px;
  }
  .sketch-select-type {
  }
}
</style>
